<template>
<div class="container"> 
  <div class="login-form-wrapper"> <!-- 额外的容器来包裹表单，可以添加背景色或边框等 --> 
    <el-form class="login-form" :model="loginForm"  @submit.native.prevent="handleLogin">  
      <el-form-item label="用户名">  
        <el-input v-model="loginForm.name" autocomplete="off"></el-input>  
      </el-form-item>  
      <el-form-item label="密码">  
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>  
      </el-form-item>  
      <el-form-item>  
        <el-button type="primary" native-type="submit">登录</el-button>  
      </el-form-item>  
    </el-form> 
  </div>
  </div>  
  </template>  
    
  <script>  
import axios from 'axios';
  
    
  export default {  
    data() {  
      return {  
        loginForm: {  
          name: '',  
          password: ''  
        }  
      };  
    },  
    methods: {  
      handleLogin() {  
        axios.post('http://localhost:8080/api/user/login', this.loginForm)  
          .then(response => {   
            if (response.data.code===2000) {  
              const token  = response.data.data.token;
              //console.log(token) 
              //console.log(response.data.data.token)
              // 登录成功，处理token，如保存到localStorage或Vuex  
              localStorage.setItem('token', token);
                
              this.$message({  
                message: '登录成功',  
                type: 'success'  
              });  
              this.$router.push('/home');  
              // 跳转到其他页面或进行其他操作  
            } else {
              console.log(response.data.code)  
              this.$message({  
                message: '用户名或密码错误',  
                type: 'error'  
              });  
            }  
           })  
          .catch(error => {  
            console.error('登录失败:', error);  
            this.$message({  
              message: '登录失败，请稍后再试',  
              type: 'error'  
            });  
          });  
      }  
    }  
  };  
  </script>  
    
  <style scoped>
  .container {  
  display: flex; /* 使用flex布局 */  
  justify-content: flex-end; /* 将子元素对齐到容器末端（即右侧） */  
  height: 100vh; /* 使容器高度充满视口 */  
  align-items: center; /* 垂直居中对齐子元素 */  
  padding-right: 200px; /* 右侧内边距，根据需要调整 */ 
  position: relative; /* 使伪元素能够相对于此容器定位 */  
  overflow: hidden; /* 防止背景图片溢出 */   
}  
.container::before {  
  content: '';  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background-image: url('@/assets/R-C (1).jpg'); /* 使用Vue的别名来引用图片 */  
  background-size: cover; /* 覆盖整个容器 */  
  z-index: -1; /* 确保背景图片在内容之下 */  
}  
  
.login-form {  
 /* 你可以在这里添加背景色、边框或阴影来模拟“透明”效果 */  
  /* 例如：background-color: rgba(255, 255, 255, 0.5); 会使表单内容看起来半透明 */  
  width: 400px;  
  padding: 20px;  
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);  
  border-radius: 8px;  
  background-color: rgba(255, 255, 255, 0.5); /* 示例：半透明背景 */  
}  
  /* 如果需要，你还可以为表单项添加样式 */  

  </style>